#comments {
  .comment {

    p:not(:first-child) {
      max-width: $seventy-five-chars;
    }

    pre {
      @extend .p-2;
      @extend .bg-body-secondary;
      @extend .text-pre-wrap;
    }
    code { line-height: 1.5rem; }
  }

  blockquote {
    color: $gray-500;
    padding: 0 1rem;
    border-left: .25rem solid $custom-gray-300;
  }
}

.comment-bubble {
  --comment-bubble-outline: var(--bs-border-color);
  --comment-bubble-background: var(--bs-tertiary-bg);
  @extend .rounded-4;
  @extend .mb-2;
  border: 1px solid var(--comment-bubble-outline);
  position: relative;
  min-width: 20%;
  background-color: var(--comment-bubble-background);

  &.comment-bubble-content, .comment-bubble-content {
    @extend .p-3;
  }

  // Arrow on the top left of the comment bubble
  $comment-bubble-arrow-top-position: 12px;
  $comment-bubble-arrow-left-position: 0;
  $comment-bubble-arrow-size: 14px;
  // This creates two triangles.
  // `::before` creates a triangle which matches the color of the comment bubble's outline.
  //
  // `::after` creates a triangle which matches the color of Bootstrap's card background color.
  // It is displayed on top of the one created by `::before` with a small offset.
  //
  // Together, they produce a single comment bubble arrow... Magic!
  &::before, &::after {
    content: '';
    position: absolute;
    top: $comment-bubble-arrow-top-position;
    left: $comment-bubble-arrow-left-position;
    width: 0;
    height: 0;
    border: $comment-bubble-arrow-size solid transparent;
    border-right-color: var(--comment-bubble-outline);
    border-top: 0;
    border-left: 0;
    margin-top: -($comment-bubble-arrow-size / 4);
    margin-left: -$comment-bubble-arrow-size;
  }
  &::after {
    top: $comment-bubble-arrow-top-position + 1px;
    left: $comment-bubble-arrow-left-position + 2px;
    z-index: 1;
    border-right-color: var(--comment-bubble-background);
  }

  p:last-of-type {
    margin-bottom: 0;
  }
}

.comment-preview {
  min-height: 6.9rem;
}
